import React, {Component} from 'react';
import {
  View,
  Text,
  ActivityIndicator,
  Image,
  StyleSheet,
  ScrollView,
} from 'react-native';

export default class MovieDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movieInfo: {}, // 电影信息
      year: 0, // 上映年份
      isLoading: true,
    };
  }

  UNSAFE_componentWillMount() {
    fetch('https://movie.querydata.org/api?id=' + this.props.id)
      .then(res => res.json())
      .then(data => {
        this.setState({
          movieInfo: data.data[0],
          year: data.year,
          isLoading: false,
        });
      });
  }

  render() {
    return <View>{this.renderInfo()}</View>;
  }

  renderInfo = () => {
    if (this.state.isLoading) {
      return <ActivityIndicator size="large"></ActivityIndicator>;
    }
    return (
      <ScrollView style={{backgroundColor: 'white', height: '100%'}}>
        <View style={{padding: 4}}>
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginTop: 20,
              marginBottom: 20,
            }}>
            {this.state.movieInfo.name}
          </Text>

          <View style={{alignItems: 'center'}}>
            <Image
              source={{uri: this.state.movieInfo.poster}}
              style={{width: 200, height: 280}}></Image>
          </View>
          <Text style={styles.margin}>
            <Text style={styles.movieTitle}>电影类型：</Text>
            {this.state.movieInfo.genre}
          </Text>
          <Text style={styles.margin}>
            <Text style={styles.movieTitle}>制作年份：</Text>
            {this.state.year}年
          </Text>
          <Text
            style={{
              lineHeight: 30,
              marginTop: 20,
              fontSize: 18,
            }}>
            {this.state.movieInfo.description}
          </Text>
        </View>
      </ScrollView>
    );
  };
}

var styles = StyleSheet.create({
  movieTitle: {
    fontWeight: 'bold',
  },

  margin: {
    marginTop: 15,
    fontSize: 18,
  },
});
